<template>
    <div class="word-container" @drop="dropHandler" @dragover.prevent>
        <div id="CXO_Editor_SDK"></div>
    </div>
</template>

<script>
export default {
    props: {
        
    },
    data() {
        return {
            cxo: null,

            fileUrl: '',
            rowguid: '',
            filetype: '',

            scriptUrl: '/changxie/web-apps/apps/api/documents/api.js',
        };
    },
    computed: {
        root() {
            return process.env.NODE_ENV === 'development' ? 'http://www.huitoue.com' : window.location.origin;
        },
    },
    methods: {
        init(filepath, filename, rowguid, readonly) {
            var that = this;

            this.fileUrl = `${that.root}${filepath}`;
            this.rowguid = rowguid;

            if (/(\.docx)$/.test(filepath)) {
                this.filetype = 'docx';
            } else {
                this.filetype = 'doc';
            }

            this.cxo = new CXO_API.CXEditor('CXO_Editor_SDK', {
                document: {   //文档参数集设置
                    fileType: that.filetype,  //指明要打开的文件类型
                    // key: `${new Date().getTime()}`,   //文档唯一ID
                    // key:  "777",   //文档唯一ID
                    height: '100vh',
                    type: 'desktop',
                    title: filename || '在线文档',
                    // title: filepath, //文档标题名称
                    // url: filepath || 'http://123.182.227.105:10108/upload/pbbgnew/out/I1301000075024141001001/f3cd749f-a923-420b-aafa-7d419a1d8ebd.docx',
                    // url: `${that.root}/upload/2022-06/20/1655686083085-new.docx`,
                    // url: `${that.root}/upload/2022-06/20/1655685790301.doc`,
                    url: `${that.root}${filepath}`,
                    key: rowguid,
                },
                permissions: {
                    comment: true,
                    download: true,
                    edit: true,
                    print: false,
                    review: true,
                },
                documentType: 'word', //指明文档类型例如word、excel、ppt
                editorConfig: {
                    callbackUrl: `${that.root}/tbez/changxieword/callback`,
                    customization: {
                        leftMenu: false,
                        rightMenu: false,
                        forcesave: true,
                    },
                    mode: readonly ? 'view' : 'edit',
                },
                events: {
                    onDocumentReady () {
                        that.cxo.getDocumentContent({
                            object: 'content',
                            type: 'property',
                        });
                    },
                    onDownloadAs (e){
                        downloader(e.data);
                    },
                    onError(e) {
                        console.log(e);
                        console.log("编辑器错误: code " + e.data.errorCode + ", 描述" + e.data.errorDescription);

                        if( e.data ){
                            if( e.data.errorCode == 'forcesave' ){
                                var desc = e.data.errorDescription;
                                desc = JSON.parse(desc);

                                if( desc.error == 0 ){
                                //保存成功
                                }else{
                                //保存失败或异常
                                }
                            }
                        }
                    },
                },
            });
        },
        loadScript(cb) {
            var scripts = document.querySelectorAll('script'),
                reg = new RegExp(this.scriptUrl);

            if ([...scripts].some(item => {
                var src = item.getAttribute('src');

                return reg.test(src);
            })) {
                this.$emit('ready');

                cb && cb();

                return;
            }

            var el = document.createElement('script');

            el.setAttribute('src', this.scriptUrl);
            el.setAttribute('type', 'text/javascript');

            el.onload = el.readystatechange = () => {
                if (!el.readyState || /loaded|complete/.test(el.readyState)) {
                    el.onload = el.readystatechange = null;

                    this.$emit('ready');
                    cb && cb();
                }
            }

            document.body.appendChild(el);
        },
        destroy() {
            try {
                this.cxo.destroyEditor();
            } catch(e) {
                // e
            }
        },
        reload(filepath, filename, rowguid, readonly) {
            this.destroy();
            this.init(filepath, filename, rowguid, readonly);
        },
        dropHandler(e) {
            console.log(e);
        },
        beforeUnload() {

        },
        saveHandler() {
            this.cxo.forceSave();
            // console.log(this.cxo)
        },
    },
    mounted() {
        this.loadScript(() => {
            // this.init();
        });

        window.addEventListener('beforeunload', this.beforeUnload);
    },
    beforeDestroy() {
        this.destroy();

        window.removeEventListener('beforeunload', this.beforeUnload);
    },
};
</script>

<style lang="scss" scoped>
    .word-container{
        width: 100%;
        height: 100%;
        background: #F4F5F6;
    }
</style>